<template>
  <div class="common-content">
    <!-- <div><i class="iconfont icon-AIyijianshengcheng"></i></div> -->
    <div v-if="isShowAi" @click="router.push({ name: 'chatBot', query: { cookName: cookName } })" class="aiSearch"><img
        src="@/assets/deepseek.png" alt="">
    </div>
    <div v-for="(item, index) in currentData" class="common-item" @click="detailCook(item.id)">
      <div class="img">
        <img :src="item.image" alt="">
      </div>
      <div class="cook-msg">
        <div class="cook-name">{{ item.name }}</div>
        <div class="like-num">
          <i class="iconfont icon-shoucang"></i>{{ item.likeNum }}
        </div>
      </div>
      <div class="author-msg">
        <div class="author-avatar">
          <img :src="item.avatar" alt="">
        </div>
        <div class="author-name">{{ item.nickname }}</div>
        <div class="publish-time">
          {{ formatDate(item.publishTime) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { formatDate } from '@/utils/formateDate.js'
import router from '@/router/index.js';
const props = defineProps({
  currentData: {
    type: Object,
    default: ''
  },
  isShowAi: {
    type: Boolean,
    default: false
  },
  cookName: {
    type: String,
    default: false
  }
})
const detailCook = (index) => {
  router.push({ name: 'detailCook', query: { id: index } })
}
</script>

<style lang="less" scoped>
.common-content {
  display: grid;
  grid-template-columns: 1fr 1fr;

  .common-item {
    margin-left: 4px;
    margin-top: 4px;
    background: #f3f6f9;
    padding: 8px;


    .img {
      width: 4.4rem;
      height: auto;

      img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }

    }

    .cook-msg {
      display: flex;
      justify-content: space-between;
      padding: 0 8px;
      height: 40px;
      line-height: 40px;
      font-size: 15px;

      .like-num {
        .iconfont {
          margin-right: 4px;
        }
      }
    }

    .author-msg {
      padding: 0 4px;
      display: grid;
      grid-template-columns: 3fr 5fr 3fr;
      height: 30px;
      line-height: 30px;

      .author-avatar {
        width: 30px;
        height: 30px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .publish-time {
        width: 55px;
      }

    }
  }

  .aiSearch {
    img {
      width: 100%;
      border-radius: 12px;
    }
  }
}
</style>
